{% extends 'article/base.html' %}
{% block title %}article list{% endblock %}
{% load static %}
{% block content %}
    <div>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>栏目</td>
            <td>操作</td>
        </tr>
        {% for article in articles %}
            <tr id="{{ article.id }}">
                <td>{{ forloop.counter }}</td>
                <td><a href="{{ article.get_absolute_url }}">{{ article.title }}</a> </td>
                <td>{{ article.column.column }}</td>
                <td>
                    <a href="{% url 'article:redit_article' article.id %}">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <a href="javascript:" onclick="del_article(this, {{ article.id }})">
                        <span class="glyphicon glyphicon-trash" style="margin-left: 5px"></span>
                    </a>
                </td>
            </tr>
        {% endfor %}
    </table>
    {% include 'paginator.html' %}
    </div>

    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript">
    function del_article(the, article_id) {
        var article_name = $(the).parents("tr").children("td").eq(1).text();
        layer.open({
            type: 1,
            skin: "layui-layer-rim",
            area: ["400px", "200px"],
            title: "删除文章",
            content: '<div class="text-center" style="margin-top:20px">' +
                '<p>是否确定删除《' + article_name + '》</p>' +
                '</div>',
            btn: ["确定", "取消"],
            yes: function () {
              $.ajax({
                  url: '{% url "article:del_article" %}',
                  type: "POST",
                  data: {"article_id": article_id},
                  success: function (e) {
                      if (e === "1") {
                          parent.location.reload();
                          layer.msg("has been deleted.");
                      }else {
                          layer.msg("删除失败");
                      }
                  },
              })
            },
        });

    }
    </script>
{% endblock %}